<template>
    <div class="w-100 fs-14 d-flex flex-column align-items-center">
        <div style="" class="flex-1 w-100">
            <!--导航栏-->
            <div class="d-flex-align-center px-20" style="height: 30px; background-color: #fff; border-radius: 4px">
                <div @click="$router.back()">返回</div>
            </div>
            <!--基本信息-->
            <div class="w-100 mt-12" style="height: 300px; background-color: #fff; border-radius: 4px">
                <div style="height: 230px" class="d-flex-between">
                    <div class="p-12 d-flex">
                        <img :src="basicData.activityCover" width="300px" />
                        <div class="ml-12">
                            <div class="mt-12">
                                <Tag color="orange">{{ basicData.attendMethod }}</Tag>
                                <span class="fw-7" style="color: black">{{ basicData.activityName }}</span>
                            </div>
                            <div class="mt-20" style="display: grid; grid-row-gap: 10px; grid-column-gap: 50px; grid-template-columns: repeat(2, 1fr)">
                                <div>举办学校：{{ basicData.activityOrganizer }}</div>
                                <div>联系人：{{ basicData.contactPerson }}</div>
                                <div>报名时间：{{ basicData.applicationStartTime }} - {{ basicData.applicationEndTime }}</div>
                                <div>电话：{{ basicData.contactPhone }}</div>
                                <div>举办时间：{{ basicData.activityStartTime }} - {{ basicData.activityEndTime }}</div>
                                <div>邮箱：{{ basicData.email }}</div>
                                <div style="grid-column-start: span 2">举办场地：{{ basicData.fullAddress }}</div>
                            </div>
                        </div>
                        <div></div>
                    </div>
                    <div>
                        <img v-if="basicData.currentStatus === 3" class="mr-40" width="70px" src="./images/finished.png" />
                        <img v-if="basicData.currentStatus === 0" class="mr-40" width="70px" src="./images/haveNotStarted.png" />
                        <img v-if="basicData.currentStatus === 1" class="mr-40" width="70px" src="./images/signingUp.png" />
                        <img v-if="basicData.currentStatus === 2" class="mr-40" width="70px" src="./images/underway.png" />
                    </div>
                </div>
                <div class="px-12">
                    <div style="height: 50px; border-top: 1px dashed #e8edf4" class="pt-12 px-36 d-flex-between-center">
                        <div class="fs-20 fw-7 d-flex-align-center">
                            <div>
                                单位
                                <span class="ml-12" style="color: #006ff9">{{ basicData.enterEnterpriseNumber }}</span>
                            </div>
                            <div class="ml-48">
                                职位
                                <span class="ml-12" style="color: #006ff9">{{ basicData.positionNumber }}</span>
                            </div>
                            <div class="ml-48">
                                岗位
                                <span class="ml-12" style="color: #006ff9">{{ basicData.recruitsTotalNumber }}</span>
                            </div>
                        </div>
                        <div class="d-flex-align-center">
                            <!--              <el-link type="primary" class="mr-12">学生小程序报名扫码</el-link>-->
                            <!--              <Button type="primary" @click="apply" style="width: 130px">我要报名</Button>-->
                        </div>
                    </div>
                </div>
            </div>
            <!--双选会详情-->
            <div class="particulars mt-12" style="background-color: #fff; border-radius: 4px">
                <div style="height: 40px; line-height: 40px; font-weight: bold; border-bottom: 1px solid #e8edf4" class="px-12">双选会详情</div>
                <div class="contain pt-12" :style="{ 'grid-template-rows': developedState ? '1fr' : '0fr' }">
                    <!--                  <pre style="white-space: normal" class="content ">{{doubleSelectionMeetingDetails}}</pre>-->
                    <div class="px-12" v-html="doubleSelectionMeetingDetails" style="white-space: pre-wrap"></div>
                </div>
                <div v-if="!developedState" @click="unfold" class="abc" style="height: 40px; text-align: center; line-height: 40px">
                    展开
                    <Icon type="ios-arrow-down" />
                </div>
                <div v-if="developedState" @click="unfold" class="abc" style="height: 40px; text-align: center; line-height: 40px">
                    折叠
                    <Icon type="ios-arrow-up" />
                </div>
            </div>
            <!--参会用人单位-->
            <div class="my-12 px-24 d-flex-between-center" style="background-color: #fff; border-radius: 4px; height: 50px">
                <div class="fw-7">参会用人单位</div>
                <Input v-model="searchName" style="width: 350px" search enter-button="搜索" placeholder="输入关键词" />
            </div>
            <!--单位列表-->
            <div class="w-100" style="display: grid; row-gap: 10px; column-gap: 10px; grid-template-columns: repeat(3, 1fr)">
                <div v-for="item in participatingEmployersList" :key="item" style="background-color: #fff; height: 300px; border-radius: 4px" class="pt-12">
                    <div class="d-flex-between-center">
                        <div v-if="item.boothNumber" class="index-unit">{{ item.boothNumber }}</div>
                        <div v-if="item.boothNumber" class="mr-12">
                            展位号：
                            <span style="color: #1677ff">{{ item.boothNumber }}</span>
                        </div>
                    </div>
                    <div style="cursor: pointer; height: 80px" class="d-flex-align-center mt-12 px-12">
                        <img :src="item.unitLogo" width="70px" />
                        <div class="ml-12">
                            <div class="fw-7 fs-16">{{ item.unitName }}</div>
                            <div class="fs-12" style="color: #969696">{{ item.locationCity }}｜{{ item.unitIndustry }} ｜ {{ item.unitQuality }} ｜ {{ item.employeeNumber }}</div>
                        </div>
                    </div>
                    <div class="mt-12" style="border-top: 1px solid #eff3f8; border-bottom: 1px solid #eff3f8; height: 120px">
                        <div class="d-flex-between-center mt-12 px-12" v-for="item2 in item.positionBrieflyVos">
                            <div>
                                <div class="fs-14">{{ item2.name }}</div>
                                <div class="fs-12" style="color: #9f9f9f">{{ item2.location }}｜{{ item2.nature }}</div>
                            </div>
                            <div class="fs-16 fw-7" style="color: #1677ff">{{ item2.minSal }}k-{{ item2.maxSal }}k</div>
                        </div>
                    </div>
                    <div class="d-flex-between-center px-12" style="height: 50px">
                        <div class="d-flex-align-center">
                            <div class="mr-12">
                                岗位：
                                <span style="color: #1677ff" class="fw-7">{{ item.recruitsTotalNumber }}</span>
                            </div>
                            <div>
                                职位：
                                <span style="color: #1677ff" class="fw-7">{{ item.positionNumber }}</span>
                            </div>
                        </div>
                        <Icon type="md-arrow-round-forward" />
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 70px; width: 100%" class="d-flex-center">
            <Page
                :current="pages.pageNumber"
                :total="pages.total"
                :page-size="pages.pageSize"
                :page-size-opts="[10, 20, 50]"
                size="small"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                show-total
                show-elevator
                show-sizer
                transfer
            ></Page>
        </div>

        <Modal v-model="modalIWantToSignUp" title="我要报名" ok-text="发布职位" @on-ok="ok" @on-cancel="cancel">
            <p>{{ modalContent }}</p>
        </Modal>
    </div>
</template>
<script>
// import Footer from '@/views/Main/components/footer.vue'
import { doubleSelectionMeetingDetailsDataAPI, joinDoubleElectionAPI, participatingEmployersDataAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
import { userInfoToken } from '@/api';
import { getStore } from '@/libs/storage';
export default {
    // components: {Footer},
    data() {
        return {
            postionTotal: '',
            modalContent: '报名之前，至少发布一个职位，您当前还未发布职位，请点击“发布职位”按钮，发布并审核通过后即可报名。',
            modalIWantToSignUp: false,
            searchName: '',
            basicData: null,
            doubleSelectionMeetingDetails: '',
            participatingEmployersList: [],
            // region TODO 展开状态
            developedState: false,
            // endregion
            // region TODO 分页
            pages: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            }
            // endregion
        };
    },
    mounted() {
        this.basicData = this.getRouteParams();
        this.obtainDoubleMeetingDetails();
        this.getParticipatingEmployers();
        // if(this.$route.params.dataRow){
        //   this.basicData=this.$route.params.dataRow
        //   this.obtainDoubleMeetingDetails()
        //   this.getParticipatingEmployers()
        //
        // }
    },
    methods: {
        // 获取数据源
        getRouteParams() {
            const routeParams = sessionStorage.getItem('dataRow');
            if (routeParams) {
                return JSON.parse(routeParams);
            } else {
                sessionStorage.setItem('dataRow', JSON.stringify(this.$route.params.dataRow));
                return this.$route.params.dataRow;
            }
        },
        // region TODO 折叠&展开
        unfold() {
            this.developedState = !this.developedState;
        },
        // endregion
        // region TODO 获取双选会详情
        obtainDoubleMeetingDetails() {
            doubleSelectionMeetingDetailsDataAPI({ doubleElectionId: this.basicData.id }).then(res => {
                console.log('详情数据', res);
                this.doubleSelectionMeetingDetails = res.result;
            });
        },
        // endregion
        // region TODO 获取参会用人单位
        getParticipatingEmployers() {
            let param = {
                doubleElectionId: this.basicData.id,
                pageNumber: this.pages.pageNumber,
                pageSize: this.pages.pageSize,
                unitName: this.searchName
            };
            participatingEmployersDataAPI(param).then(res => {
                console.log('参会用人单位', res);
                this.participatingEmployersList = res?.result?.records || [];
                this.pages.total = res?.result?.total || 0;
            });
        },
        // endregion
        changePage: function (val) {
            this.pages.pageNumber = val;
            this.getParticipatingEmployers();
        },
        changePageSize: function (val) {
            this.pages.pageSize = val;
            this.getParticipatingEmployers();
        },
        //双选会报名
        apply() {
            // let param={
            //   doubleElectionId:this.basicData.id,
            // }
            // let userInfo = JSON.parse(getStore('userInfo'));
            // if (userInfo.resource === "5"){
            //   getJobPageDataApi({
            //     pageNumber:1,
            //     pageSize:10,
            //     status:'全部',
            //   }).then((res) => {
            //     console.log(res.result.total)
            //     this.postionTotal=res.result.total
            //     if(this.postionTotal>0){
            //       console.log(this.basicData,'...')
            //
            //       joinDoubleElectionAPI(param).then((res) => {
            //         if (res.success){
            //           this.$message.success(res.message)
            //         }
            //       })
            //     }else{
            //       this.modalIWantToSignUp=true;
            //     }
            //   })
            // }
            // if (userInfo.resource === "4"){
            //
            //   joinDoubleElectionAPI(param).then((res) => {
            //     if (res.success){
            //       this.$message.success(res.message)
            //     }
            //   })
            // }
        },
        numberOfJobsAcquired() {}
    }
};
</script>
<style scoped lang="less">
.particulars {
    .contain {
        display: grid;
        transition: 0.3s;
        overflow: hidden;

        .content {
            min-height: 200px;
            white-space: pre-wrap;
        }
    }
}

.index-unit {
    background-image: url('./images/serialNumber.png');
    width: 40px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}
</style>
